<template>
    <div id="codeEditBox" style="width: 100%; height: 300px;"></div>
</template>

<script setup>
import * as monaco from "monaco-editor";
import {ref, toRaw, onMounted, onUnmounted} from 'vue'


const props = defineProps({
    value: {
        type: String,
        default: ''
    },
    disabled: {
        type: Boolean,
        default: false
    }
});

const emit = defineEmits(['changeTextArea'])



// 编辑器实列
const editor = ref(null);

const getVal = () => {
    return toRaw(editor.value).getValue();
};

onMounted(() => {
    editor.value = monaco.editor.create(document.getElementById("codeEditBox"), {
        theme: "vs-dark", // 使用较亮的主题
        value: props.value,
        language: "java", // 使用动态语言
        folding: true,
        readOnly: props.disabled,
        foldingHighlight: true,
        foldingStrategy: "auto", // 自动选择折叠策略
        showFoldingControls: "mouseover", // 鼠标悬停时显示折叠控件
        disableLayerHinting: true,
        emptySelectionClipboard: false,
        selectionClipboard: false,
        automaticLayout: true,
        codeLens: true,
        scrollBeyondLastLine: true, // 允许在最后一行之后滚动，增加可视空间
        colorDecorators: true,
        accessibilitySupport: "auto", // 根据环境自动选择
        lineNumbers: "on",
        lineNumbersMinChars: 5, // 减少行号最小字符数
        enableSplitViewResizing: true,
        fontSize: 16, // 适中字体大小
        lineHeight: 22, // 行高设置
        autoIndent: "full", // 自动缩进
        wordWrap: "on", // 启用自动换行
        selectionHighlight: true, // 高亮显示选中的内容
        cursorBlinking: "smooth", // 光标闪烁方式
        cursorStyle: "line", // 光标样式
        formatOnType: true, // 输入时自动格式化代码
        formatOnPaste: true, // 粘贴时自动格式化代码
        suggestOnTriggerCharacters: true, // 当输入触发字符时显示建议
        quickSuggestions: {
            other: true,
            comments: false,
            strings: true
        },

        minimap: {
            enabled: true, // 显示迷你地图
            side: 'right', // 迷你地图显示在右侧
            renderCharacters: true, // 渲染字符而不是仅仅渲染块
            scale: 1.5, // 缩放比例
        }
    })

    editor.value.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_D, () => {
        const model = editor.value.getModel();
        const selection = editor.value.getSelection();

        // 获取当前行的范围
        const startLineNumber = selection.startLineNumber;
        const endLineNumber = selection.startLineNumber; // 只删除当前行
        const range = new monaco.Range(startLineNumber, 1, endLineNumber + 1, 1);

        // 获取当前行内容
        const currentLineContent = model.getValueInRange(range);

        // 删除当前行
        model.pushEditOperations([], [
            {range: range, text: ''}
        ], () => null);
    });
    // 监听内容变化
    editor.value.onDidChangeModelContent((e) => {
        // const value = this.monacoEditor.getValue();
        const code = getVal();
        // fun.setServiceTextArea(code || '')
        emit('changeTextArea', code);
    });

})

onUnmounted(() => {
    if (editor.value) {
        // editor.value.dispose();
        editor.value = null;
    }
});



</script>

